import { useLocation } from 'react-router-dom'
import { useSelector } from 'react-redux';
import { Breadcrumb } from 'antd';

interface MenuItem{
    key:string;
    label: string;
    children?:MenuItem[]
}

// 返回值的类型
// interface Breadcrumb{
//     label:string;
// }

function findBreadCrumbPath(path:string,menuItems:MenuItem[]):string[]{
    const pathSegments:string[] = [];
    function findPath(currentPath:string,items:MenuItem[]){
        for(let item of items){
            if(currentPath.startsWith(item.key)){
                pathSegments.push(item.label)
                if(item.children){
                    findPath(currentPath,item.children)
                }
                break
            }
        }
        return pathSegments
    }

    return findPath(path,menuItems)
}

function MyBreadCrumb(){
    const location=useLocation()
    // console.log('location',location.pathname);
    const {menuList}=useSelector((state:any)=>state.authSlice)
    const wana = findBreadCrumbPath(location.pathname,menuList).map(item=>({title:item}))
    // console.log('wanan',wana);
    
    return <div>
        <Breadcrumb items={wana} />
    </div>
}

export default MyBreadCrumb